<template>
    <div class="login-wrap" id="loginBg">
        <div class="ms-title">后台管理系统</div>
        <div class="ms-login">
            <Form :model="ruleForm" ref="ruleForm" :rules="ruleValidate">
              <FormItem prop="username">
                <Input type="text" v-model="ruleForm.username" placeholder="username" size="large"/>
              </FormItem>

              <FormItem prop="password">
                <Input type="password" v-model="ruleForm.password" placeholder="password" size="large" @on-enter="submitForm('ruleForm')"/>
              </FormItem>

              <FormItem>
                <Button type="info" @click="submitForm('ruleForm')" size="large" long>登录</Button>
              </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>
import {CanvasParticle} from '../../../static/js/canvas-particle.js'
export default {
  data: function() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      ruleValidate: {
        username: [
          { required: true, message: "姓名怎么能为空...", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码可不能为空哦...", trigger: "blur" }
        ]
      }
    };
  },
  mounted(){
    var config = {
        vx: -4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 3,	//小球高宽，其实为正方形，所以不宜太大
        width: 3,
        count: 300,		//点个数
        color: "121, 162, 185", 	//点颜色
        stroke: "130,255,255", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }
    CanvasParticle(config);
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          localStorage.setItem("ms_username", this.ruleForm.username);
          // this.$Notice.open({
          //   desc: "登录成功",
          //   duration: 2
          // });
          const successMsg = this.$Message.loading({
              content: '登录中...',
              duration: 0
          })
          setTimeout(successMsg, 2000);
          setTimeout(() => {
            this.$router.push("/");
          }, 4000);
        } else {
          console.log("error submit!!");
          this.$Notice.error({
            desc: "登录失败, 好好看看提示信息哦........."
          });
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.ms-title {
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -230px;
  margin-left: 18px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}
.ms-login {
  position: absolute;
  left: 52%;
  top: 50%;
  width: 352px;
  height: 217px;
  margin: -150px 0 0 -190px;
  padding: 40px;
  border-radius: 5px;
  background: #fff;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
}
.ivu-form-item {
  margin-bottom: 20px;
  vertical-align: top;
  zoom: 1;
}
.ivu-form-item[data-v-1b2fa4a8] {
  margin-bottom: 27px;
  vertical-align: top;
  zoom: 1;
}
</style>